<script setup>
import { ref, provide } from 'vue'
import { useSignUpService } from '@/api/signUp'
import { useUserStore } from '@/stores'
const userStore = useUserStore()

const btn = ref(userStore.isSignUp ? '更改信息' : '确认报名')
const formModel = ref({
  studentId: userStore.studentId,  // 学号
  userId: userStore.userId,        // 创建者id
  name: '',        // 报名人姓名
  // studentId: '',   // 学号
  professionClass: '',       // 专业班级
  focus: '',       // 选择方向
  time: '',        // 面试时间
  phoneNumber: '', // 联系电话
  qqNumber: '',    // QQ号
})
// 获取表单元素
const form = ref()
// 前端验证规则
const rules = {
  name: [
    // 非空验证
    { required: true, message: '请输入你的真实姓名', trigger: 'blur' },
    // 长度验证
    { min: 1, max: 10, message: '请输入长度为1-10的字符', trigger: 'blur' }
  ],
  professionClass: [
    // 非空验证
    { required: true, message: '请输入你的专业和班级', trigger: 'blur' }
  ],
  focus: [
    // 非空验证
    { required: true, message: '请选择你进入实验室要学习的方向', trigger: 'blur' }
  ],
  time: [
    // 非空验证
    { required: true, message: '请选择你合适的面试时间', trigger: 'blur' }
  ],
  phoneNumber: [
    // 非空验证
    { required: true, message: '请输入你的专业和班级', trigger: 'blur' },
    // 长度验证
    { min: 11, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  qqNumber: [
    // 非空验证
    { required: true, message: '请输入你的qq号', trigger: 'blur' }
  ]
}
// 点击提交报名事件
const toSignUp = async (form) => {
  const res = await useSignUpService(formModel.value)
  if (res.data.status === 1) {
    ElMessage.error(res.data.message)
    return
  } else {
    ElMessage.success(res.data.message)
  }
  // 报名后，向pinia中存储已经报名的标志
  userStore.setIsSignUp(true)
}
// 点击重置事件
const resetForm = (formEl=FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<template>
  <el-form
    ref="form"
    style="max-width: 600px"
    :model="formModel"
    :rules="rules"
    label-width="auto"
    status-icon
    class="signUp"
  >
    <el-form-item label="学号">
      <span>{{ userStore.studentId }}</span>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model.trim="formModel.name" />
    </el-form-item>
    <el-form-item label="专业班级" prop="professionClass">
      <el-input v-model.trim="formModel.professionClass" />
    </el-form-item>
    <el-form-item label="选择方向" prop="focus">
      <el-select v-model="formModel.focus" placeholder="选择方向">
        <el-option label="安卓android" value="安卓android" />
        <el-option label="iOS" value="iOS" />
        <el-option label="前端web" value="前端web" />
        <el-option label="后端server" value="后端server" />
        <el-option label="鸿蒙" value="鸿蒙" />
      </el-select>
    </el-form-item>
    <el-form-item label="面试时间" prop="time">
      <el-select v-model="formModel.time" placeholder="面试时间">
        <el-option label="2025/10/09 12:00-14:00" value="2025/10/09 12:00-14:00" />
        <el-option label="2025/10/09 17:00-19:00" value="2025/10/09 17:00-19:00" />
        <el-option label="2025/10/10 12:00-14:00" value="2025/10/10 12:00-14:00" />
        <el-option label="2025/10/10 17:00-19:00" value="2025/10/10 17:00-19:00" />
      </el-select>
    </el-form-item>
    <el-form-item label="联系电话" prop="phoneNumber">
      <el-input v-model.trim="formModel.phoneNumber" />
    </el-form-item>
    <el-form-item label="QQ号" prop="qqNumber">
      <el-input v-model.trim="formModel.qqNumber" />
    </el-form-item>
    <el-form-item>
      <div class="submit">
        <el-button type="primary" @click="toSignUp(formModel)">
          {{ btn }}
        </el-button>
        <el-button @click="resetForm(form)">重置</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
.signUp {
  font-family: 仓耳非白4-C;
  margin: 10px;

  .submit {
    width: 170px;
    margin: 0 auto;
  }
}
</style>